<template>
	<basic-container>
		<avue-form ref="form" v-model="obj" :option="optionEdit" @submit="submit">
			<!-- <template slot-scope="scope" slot="pic">
				<el-checkbox-group v-model="checkList">
					<div class="paperWork" v-for="item in paperWorkList" :key="item.id">
						<el-checkbox :label="item.id" disabled>{{ item.name }}</el-checkbox>
						<el-button
							@click="viewMyPaper(item.imgUrl, item.name)"
							@mouseover.native="changeColor(item.id)"
							@mouseout.native="changeColor(item.id)"
							:class="item.isOk ? 'checkPaper1' : 'checkPaper'"
							type="text"
						>
							[查看]
						</el-button>
					</div>
				</el-checkbox-group>
			</template> -->
			<template slot-scope="scope" slot="storeLogoUrl">
				<el-upload
					class="avatar-uploader"
					:action="upImgUrl"
					:headers="headers"
					:show-file-list="false"
					:on-success="storeLogoUrlSuccess"
					:before-upload="beforeStoreLogoUrlUpload"
				>
					<img v-if="obj.storeLogoUrl" :src="obj.storeLogoUrl" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</template>
			<template slot-scope="scope" slot="storeAccount">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.storeAccount }}</el-tag>
			</template>
			<template slot-scope="scope" slot="companyName">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.companyName }}</el-tag>
			</template>
			<template slot-scope="scope" slot="storeName">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.storeName }}</el-tag>
			</template>
			<template slot-scope="scope" slot="businessNo">
				<el-tag color="#fff" style="border: none;color: #333333;word-break: break-all">{{ obj.businessNo }}</el-tag>
			</template>
			<template slot-scope="scope" slot="businessTerm">
				<el-tag color="#fff" style="border: none;color: #333333;" v-if="obj.businessTerm[0]">{{ obj.businessTerm[0] + ' 至 ' + obj.businessTerm[1] }}</el-tag>
			</template>
			<template slot-scope="scope" slot="storeType">
				<el-tag color="#fff" style="border: none;color: #333333;" v-if="obj.storeType == 0">自营</el-tag>
				<el-tag color="#fff" style="border: none;color: #333333;" v-else>非自营</el-tag>
			</template>
			<template slot-scope="scope" slot="taxNo">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.taxNo }}</el-tag>
			</template>
			<template slot-scope="scope" slot="cycleType">
				<el-tag color="#fff" style="border: none;color: #333333;" v-if="obj.cycleType == 0">月结</el-tag>
				<el-tag color="#fff" style="border: none;color: #333333;" v-else>周结</el-tag>
			</template>
			<template slot-scope="scope" slot="signingAreas">
				<div color="#fff" style="border: none;color: #333333;max-height: 200px;overflow: scroll;">{{ obj.signingAreas }}</div>
			</template>
			<template slot-scope="scope" slot="operatingAreas">
				<el-select v-model="obj.operatingAreas" @change="changeTree" size="mini" placeholder="请选择" multiple collapse-tags>
					<el-option :value="obj.operatingAreas"  style="height: auto">
						<el-tree :data="obj.operatingAreaTreeNodes"  :default-expanded-keys="[]" node-key="id" accordion ref="signTree" highlight-current :props="props1"></el-tree>
					</el-option>
				</el-select>
			</template>
			<template slot-scope="scope" slot="goodsClassIds">
				<el-select v-model="obj.goodsClassIdsName" @change="changeGClass" size="mini" placeholder="请选择" multiple collapse-tags>
					<el-option :value="obj.goodsClassIdsName" style="height: auto">
						<el-tree
							:data="obj.goodsClassTreeNodes"
							:default-expanded-keys="[]"
							node-key="id"
							accordion
							ref="goodsClassTree"
							highlight-current
							:props="propsClass"
						></el-tree>
					</el-option>
				</el-select>
			</template>
			<template slot-scope="scope" slot="tripartiteStoreId">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.tripartiteStoreId }}</el-tag>
			</template>
			<template slot-scope="scope" slot="commissionRate">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.commissionRate }}</el-tag>
			</template>
			<template slot-scope="scope" slot="storeLabel">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.storeLabel }}</el-tag>
			</template>
			<template slot-scope="scope" slot="validity">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.validity }}</el-tag>
			</template>
			<template slot-scope="scope" slot="registerTime">
				<el-tag color="#fff" style="border: none;color: #333333;">{{ obj.registerTime }}</el-tag>
			</template>
			<template slot-scope="scope" slot="banner">
				<div class="upload">
					<el-image v-if="obj.banner" @click="setBanner" fit="contain" :src="obj.banner" style="margin-right: 0.2rem;width: 50px; height: 50px"></el-image>
					<el-button size="mini" type="primary" @click="setBanner">设置图片</el-button>
				</div>
			</template>
			<template slot-scope="scope" slot="businessLicense">
				<div>
					<el-upload
						class="avatar-uploader"
						:action="upImgUrl"
						:headers="headers"
						list-type="picture-card"
						:show-file-list="false"
						:on-success="businessLicenseSuccess"
						:before-upload="beforeStoreLogoUrlUpload"
					>
						<img v-if="obj.businessLicense" :src="obj.businessLicense" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">
						<span style="color: red">*</span>
						营业执照
						<span v-if="obj.businessLicense"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.businessLicense,'营业执照')">查看</span>
					</div>
				</div>
			</template>
			<template slot-scope="scope" slot="operateLicenseImg">
				<div>
					<el-upload
						class="avatar-uploader"
						:action="upImgUrl"
						:headers="headers"
						list-type="picture-card"
						:show-file-list="false"
						:on-success="operateLicenseImgSuccess"
						:before-upload="beforeStoreLogoUrlUpload"
					>
						<img v-if="obj.operateLicenseImg" :src="obj.operateLicenseImg" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">经营许可证
						<span v-if="obj.operateLicenseImg"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.operateLicenseImg,'经营许可证')">查看</span>
					</div>
				</div>
			</template>
			<template slot-scope="scope" slot="frontcardImg">
				<div>
					<el-upload
						class="avatar-uploader"
						:action="upImgUrl"
						:headers="headers"
						list-type="picture-card"
						:show-file-list="false"
						:on-success="frontcardImgSuccess"
						:before-upload="beforeStoreLogoUrlUpload"
					>
						<img v-if="obj.frontcardImg" :src="obj.frontcardImg" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">
						<span style="color: red">*</span>
						身份证正面
						<span v-if="obj.frontcardImg"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.frontcardImg,'身份证正面')">查看</span>
					</div>
				</div>
			</template>
			<template slot-scope="scope" slot="backcardImg">
				<div>
					<el-upload
						class="avatar-uploader"
						:action="upImgUrl"
						list-type="picture-card"
						:headers="headers"
						:show-file-list="false"
						:on-success="backcardImgSuccess"
						:before-upload="beforeStoreLogoUrlUpload"
					>
						<img v-if="obj.backcardImg" :src="obj.backcardImg" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">
						<span style="color: red">*</span>
						身份证反面
						<span v-if="obj.backcardImg"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.backcardImg,'身份证反面')">查看</span>
					</div>
				</div>
			</template>

			<template slot-scope="scope" slot="orthersImgs">
				<div class="others">
					<div class="other-item">
						<el-upload
							class="avatar-uploader"
							:action="upImgUrl"
							list-type="picture-card"
							:headers="headers"
							:show-file-list="false"
							:on-success="otherOneImgSuccess"
							:before-upload="beforeStoreLogoUrlUpload"
						>
							<img v-if="obj.otherOne" :src="obj.otherOne" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">其他证件（1）
							<span v-if="obj.otherOne"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.otherOne,'其他证件（1）')">查看</span>
						</div>
					</div>
					<div class="other-item" v-if="obj.otherOne">
						<el-upload
							class="avatar-uploader"
							:action="upImgUrl"
							list-type="picture-card"
							:headers="headers"
							:show-file-list="false"
							:on-success="otherTwoImgSuccess"
							:before-upload="beforeStoreLogoUrlUpload"
						>
							<img v-if="obj.otherTwo" :src="obj.otherTwo" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">其他证件（2）
							<span v-if="obj.otherTwo"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.otherTwo,'其他证件（2）')">查看</span>
						</div>
					</div>
					<div class="other-item" v-if="obj.otherTwo">
						<el-upload
							class="avatar-uploader"
							:action="upImgUrl"
							list-type="picture-card"
							:headers="headers"
							:show-file-list="false"
							:on-success="otherThreeImgSuccess"
							:before-upload="beforeStoreLogoUrlUpload"
						>
							<img v-if="obj.otherThree" :src="obj.otherThree" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">其他证件（3）
							<span v-if="obj.otherThree"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.otherThree,'其他证件（3）')">查看</span>
						</div>
					</div>
					<div class="other-item" v-if="obj.otherThree">
						<el-upload
							class="avatar-uploader"
							:action="upImgUrl"
							list-type="picture-card"
							:headers="headers"
							:show-file-list="false"
							:on-success="otherFourImgSuccess"
							:before-upload="beforeStoreLogoUrlUpload"
						>
							<img v-if="obj.otherFour" :src="obj.otherFour" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">其他证件（4）
							<span v-if="obj.otherFour"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.otherFour,'其他证件（4）')">查看</span>
						</div>
					</div>
					<div class="other-item" v-if="obj.otherFour">
						<el-upload
							class="avatar-uploader"
							:action="upImgUrl"
							list-type="picture-card"
							:headers="headers"
							:show-file-list="false"
							:on-success="otherFiveImgSuccess"
							:before-upload="beforeStoreLogoUrlUpload"
						>
							<img v-if="obj.otherFive" :src="obj.otherFive" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<div style="padding: 0.2rem; font-size: 0.24rem;color: #999;width: 148px;text-align: center;">其他证件（5）
							<span v-if="obj.otherFive"  style="color: #F39800;cursor:pointer;" @click="showBigPic(obj.otherFive,'其他证件（5）')">查看</span>
						</div>
					</div>
				</div>
			</template>
		</avue-form>
		<el-dialog width="30%" :title="workImg.name" :visible.sync="innerVisible" append-to-body center>
			<img align="center" style="width: 60%;height: auto;margin-left: 20%;" :src="workImg.imgUrl" />
		</el-dialog>
		<el-dialog width="80%" title="设置图片" :visible.sync="imgVisible" :before-close="cancelDia" append-to-body :close-on-click-modal="false" center :show-close="false">
			<div>
				<el-form class="demo-form-inline" :inline="true">
					<div>
						<el-form-item v-for="(domain, index) in acFullcuts" :key="index" :prop="'domains.' + index + '.value'" style="margin: 0 0 5px 0;">
							<!-- <div class="upload"> -->
							<span style="padding: 0 5px;width: 135px;">{{ domain.label }}</span>
							<el-input
								style="margin-right: 0.2rem;width:300px"
								@focus="uploadbtn(7)"
								v-model="obj.acPcAccUrl"
								:clearable="true"
								placeholder="最佳尺寸:1280px*500px"
							/>
							<el-image v-if="domain.image" @click="uploadbtn" fit="contain" :src="domain.image" style="margin-right: 0.2rem;width: 50px; height: 50px"></el-image>
							<el-button size="mini" type="primary" @click="uploadbtn(7)">上传图片</el-button>
							<span style="padding: 0 5px;width: 80px;">广告类型</span>
							<el-select v-model="domain.acType" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
							<div v-if="domain.acType">
								<span style="padding: 0 5px;width: 80px;">选择商品</span>
								<el-select v-model="domain.goodsId" placeholder="请选择">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>

							<el-button style="margin: 0 10px;" @click.prevent="removeDomain(index)">删除</el-button>
							<!-- <p class="tsmsg">最多可上传1张照片</p> -->
							<!-- </div> -->
						</el-form-item>
						<!-- <el-form-item label="广告类型" >
							<el-select v-model="domain.acType" placeholder="请选择">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="选择商品" >
							<el-select v-model="domain.goodsId" placeholder="请选择">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item>
							<!-- <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button> -->
							<el-button @click="addDomain">新增</el-button>

							<!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
						</el-form-item>
					</div>
				</el-form>
				<div style="text-align: center;">
					<el-button size="mini" type="primary" @click="submitBanner">保存</el-button>
					<el-button size="mini" @click="cancelDia">取消</el-button>
				</div>
			</div>
		</el-dialog>
		<sel-file ref="selFile" @callback="selFileCallBack" albumCode="pic_store" dialogTitle="选择图片" selectType="radio" selMaxWidth="300px" selMaxHeight="300px"></sel-file>
	</basic-container>
</template>

<script>
import selFile from '@/components/file/selFile';
import { getParentAndGrandInfoById, getMapAllGoodsClass } from '@/api/base/store/store';
import { getStoreDetail, update,  listDicData } from '@/api/base/store/seller/storeInfo';
import { mapGetters } from 'vuex';
import { getToken } from '@/util/store';
import { getOrganizationMapByLevel } from '@/api/base/goods/addGoods';
var validateTrueName = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请输入姓名'));
	} else if (!/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_-]){2,8}$/.test(value)) {
		callback(new Error('姓名应为2-8个中文、英文、数字'));
	} else {
		callback();
	}
};
export function validateNum(rule,value,callback) {
	if(!value){
		callback();
	}
	setTimeout(() => {
		const re = /^[0-9]+$/;
		const rsCheck = re.test(value);
		if (!rsCheck) {
			callback(new Error('只能输入数字'));
		}else {
			callback();
		}
	}, 0);
}
export const isEmail = (rule, value, callback) => {
	let re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
	let flag = false;
	flag = re.test(value);
	if (!value) {
		callback();
	} else if (!flag) {
		callback(new Error('邮箱格式不正确'));
	} else {
		callback();
	}
};
export const isTelephone = (rule, value, callback) => {
	let re = /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
	let flag = false;
	flag = re.test(value);
	if (!value) {
		callback(new Error('请输入手机号码'));
	} else if (!flag) {
		callback(new Error('手机号码不正确'));
	} else {
		callback();
	}
};
var baseUrl = '/base/area/getAreaListByLevel';
import {validateChineseEnglish } from '@/util/util';

import { checkTel, zipCode } from '@/util/rej';
export default {
	data() {
		return {
			propsClass: {
				label: 'className',
				id: 'id',
				children: 'childrenNodes'
			},
			imgLimit: 5,
			acFullcuts: [
				{
					label: '店铺首页banner1',
					image: '',
					acType: null,
					goodsId: ''
				}
			],
			orthersImg: false,
			upImgUrl: `/res/album/sys_img_upload?album_code=pic_user_photo`,
			headers: {},
			options: [],
			listTree: [],
			imgVisible: false,
			innerVisible: false,
			paperWorkList: [
				{
					id: 1,
					name: '法人身份证件(正面)',
					imgUrl: '',
					isOk: false
				},
				{
					id: 2,
					name: '法人身份证件(反面)',
					imgUrl: '',
					isOk: false
				},
				{
					id: 3,
					name: '法人手持身份证',
					imgUrl: '',
					isOk: false
				},
				{
					id: 4,
					name: '银行开户证明',
					imgUrl: '',
					isOk: false
				}
			],
			//证件已选择数组
			checkList: [],
			workImg: {},
			loading: true,
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			//相册数据
			pic: {},
			//编辑 查看数据
			obj: {
				orthersImgs: []
			},
			NewSettlementCycle:'',
			optionEdit: {
				card: false,
				size: 'mini',
				mock: false,
				submitText: '提交',
				emptyBtn: false,
				menuPostion: 'right',
				labelWidth: '130',
				group: [
					{
						label: '店铺logo',
						// labelWidth: '20',
						prop: 'group1',
						column: [
							{
								prop: 'storeLogoUrl',
								formslot: true
							}
						]
					},
					{
						label: '基本信息',
						prop: 'group2',
						column: [
							{
								label: '店铺账号',
								prop: 'storeAccount',
								span: 8,
								formslot: true,
								fixed: true
							},
							{
								label: '商家公司名称',
								prop: 'companyName',
								span: 8,
								formslot: true
							},
							{
								label: '店铺名称',
								prop: 'storeName',
								span: 8,
								formslot: true
							},
							{
								label: '营业执照号',
								prop: 'businessNo',
								span: 8,
								display: false,
								formslot: true
							},
							{
								label: '营业执照有效期',
								prop: 'businessTerm',
								span: 8,
								formslot: true
							},
							{
								label: '店铺类型',
								prop: 'storeType',
								span: 8,
								formslot: true
							},
							{
								label: '经营品类',
								prop: 'goodsClassIds',
								span: 8,
								formslot: true
							},
							{
								label: '统一社会信用代码',
								prop: 'taxNo',
								span: 8,
								formslot: true
							},
							{
								label: '结算周期',
								prop: 'cycleType',
								span: 8,
								tip:'',
								formslot: true
							},
							{
								label: '签约区域',
								prop: 'signingAreas',
								span: 8,
								formslot: true
							},
							{
								label: '可见区域',
								prop: 'operatingAreas',
								tip: '可见区域禁止修改，后期优化',
								span: 8,
								formslot: true
							},
							{
								label: '店铺客服电话',
								prop: 'kfTelephone',
								span: 8,
								rules: [
									{
										required: true,
										validator: isTelephone,
										trigger: 'blur'
									}
								]
							},
							{
								label: '店铺ID',
								prop: 'tripartiteStoreId',
								span: 8,
								formslot: true
							},
							{
								label: '抽佣比例',
								prop: 'commissionRate',
								span: 8,
								formslot: true
							},
							{
								label: '店铺标签',
								prop: 'storeLabel',
								type: 'select',
								disabled: true,
								span: 8,
								rules: [
									{
										required: false,
										message: '请选择店铺标签',
										trigger: 'blur'
									}
								],
								dicUrl: '/api/dict/listDictsByCode?dictTypeCode=STORE_LABEL',
								dicMethod: 'post',
								props: {
									label: 'name',
									value: 'dictId'
								}
							}
						]
					},
					{
						label: '对接人信息',
						prop: 'group3',
						column: [
							{
								label: '对接人姓名',
								prop: 'dockingPeopleName',
								span: 8,
								rules: [
									{
										required: true,
										validator: validateTrueName,
										trigger: 'blur'
									}
								]
							},
							{
								label: '对接人电话',
								prop: 'dockingPeoplePhone',
								span: 8,
								rules: [
									{
										required: true,
										validator: checkTel,
										trigger: 'blur'
									}
								]
							},
							{
								label: '对接人邮箱',
								prop: 'dockingPeopleEmail',
								span: 8,
								rules: [
									{
										required: false,
										validator: isEmail,
										trigger: 'blur'
									}
								]
							},
							{
								label: '备用对接人姓名',
								prop: 'dockingPeopleNames',
								span: 8,
								rules: [
									{
										required: true,
										validator: validateTrueName,
										trigger: 'blur'
									}
								]
							},
							{
								label: '备用对接人电话',
								prop: 'dockingPeoplePhones',
								span: 8,
								rules: [
									{
										required: true,
										validator: checkTel,
										trigger: 'blur'
									}
								]
							},
							{
								label: '备用对接人邮箱',
								prop: 'dockingPeopleEmails',
								span: 8,
								rules: [
									{
										validator: isEmail,
										trigger: 'blur'
									}
								]
							}
						]
					},
					{
						label: '办公地址',
						prop: 'group4',
						display: true,
						column: [
							{
								label: '省份',
								prop: 'companyProvince',
								type: 'select',
								span: 8,
								props: {
									label: 'area_name',
									value: 'id'
								},
								rules: [
									{
										required: true,
										message: '请输入省份',
										trigger: 'change'
									}
								],

								cascaderItem: ['companyCity', 'companyAreaId'],
								cascaderChange: true,
								dicUrl: `${baseUrl}?level=0`
							},
							{
								label: '城市',
								prop: 'companyCity',
								type: 'select',
								span: 8,
								props: {
									label: 'area_name',
									value: 'id'
								},
								rules: [
									{
										required: true,
										message: '请输入城市',
										trigger: 'change'
									}
								],
								defaultIndex: 0,
								dicFlag: false,
								dicUrl: `${baseUrl}?parentId={{key}}&&level=1`
							},
							{
								label: '地区',
								prop: 'companyAreaId',
								type: 'select',
								span: 8,
								row: true,
								props: {
									label: 'area_name',
									value: 'id'
								},
								rules: [
									{
										required: true,
										message: '请输入地区',
										trigger: 'change'
									}
								],
								defaultIndex: 0,
								dicFlag: false,
								dicUrl: `${baseUrl}?parentId={{key}}&&level=2`
							},
							{
								label: '详细地址',
								prop: 'companyAreaInfo',
								maxlength:100,
								showWordLimit: true,
								type: 'textarea',
								span: 24,
								row: true,
								rules: [
									{
										required: true,
										message: '请输入详细地址',
										trigger: 'blur'
									}
								]
							},
							{
								label: '邮政编码',
								prop: 'companyZip',
								maxlength: 6,
								span: 8,
								rules: [
									{
										required: true,
										validator: zipCode,
										trigger: 'blur'
									}
								]
							}
						]
					},
					{
						label: '资质信息',
						prop: 'group5',
						display: true,
						labelWidth: 0,
						column: [
							{
								span: 6,
								prop: 'businessLicense',
								formslot: true,
								rules: [
									{
										required: true,
										message: '请上传营业执照',
										trigger: 'change'
									}
								]
							},
							{
								span: 6,
								prop: 'operateLicenseImg',
								formslot: true
							},
							{
								span: 6,
								prop: 'frontcardImg',
								formslot: true,
								rules: [
									{
										required: true,
										message: '请上传身份证正面',
										trigger: 'change'
									}
								]
							},
							{
								span: 6,
								prop: 'backcardImg',
								formslot: true,
								rules: [
									{
										required: true,
										message: '请上传身份证反面',
										trigger: 'change'
									}
								]
							},
							{
								span: 24,
								prop: 'orthersImgs',
								formslot: true,
								label: '其他证件'
							}
						]
					},
					{
						label: '合作周期',
						icon: 'el-icon-info',
						prop: 'group6',
						display: true,
						column: [
							{
								label: '合作周期',
								prop: 'validity',
								span: 8,
								formslot: true
							}
						]
					},
					{
						label: '注册时间',
						prop: 'group7',
						display: true,
						column: [
							{
								label: '注册时间',
								formslot: true,
								prop: 'registerTime',
								span: 8
							}
						]
					},
					{
						label: '银行账户',
						prop: 'group8',
						display: true,
						labelWidth: '120',
						column: [
							{
								label: '银行名称',
								prop: 'bankId',
								type: 'select',
								span: 8,
								dicUrl: '/base/bank/list',
								props: {
									label: 'bankName',
									value: 'id'
								}
							},
							{
								label: '收款户名',
								prop: 'accountName',
								maxlength: 6,
								span: 8,
								rules: [
									{
										validator: validateChineseEnglish,
										trigger: 'blur'
									}
								]
							},
							{
								label: '收款账号',
								prop: 'accountNum',
								maxlength: 19,
								span: 8,
								rules: [
									{
										validator: validateNum,
										trigger: 'blur'
									}
								]
							}
							// {
							// 	label: '银行所在省份',
							// 	prop: 'bankProvince',
							// 	type: 'select',
							// 	span: 8,
							// 	props: {
							// 		label: 'area_name',
							// 		value: 'id'
							// 	},
							// 	cascaderItem: ['bankCity'],
							// 	cascaderChange: true,
							// 	dicUrl: `${baseUrl}?level=0`
							// },
							// {
							// 	label: '银行所在城市',
							// 	prop: 'bankCity',
							// 	type: 'select',
							// 	span: 8,
							// 	props: {
							// 		label: 'area_name',
							// 		value: 'id'
							// 	},
							// 	dicUrl: `${baseUrl}?parentId={{key}}&&level=1`
							// },
							// {
							// 	label: '持卡人手机号',
							// 	labelWidth: '128',
							// 	prop: 'accountMobile',
							// 	maxlength: 11,
							// 	span: 8
							// },
							// {
							// 	label: '持卡人身份证号',
							// 	labelWidth: '130',
							// 	prop: 'accountIdNum',
							// 	maxlength: 23,
							// 	span: 8
							// }
						]
					},
					{
						label: '店铺描述',
						prop: 'group9',
						display: true,
						column: [
							// {
							// 	label: 'banner图片',
							// 	formslot: true,
							// 	prop: 'banner',
							// 	row:true,
							// 	span: 8
							// },
							{
								label: '店铺描述',
								prop: 'storeDesc',
								type: 'textarea',
								maxlength:100,
								showWordLimit: true,
								minRow: 2,
								placeholder: '将对外展示店铺详情，请描述',
								row: true,
								span: 12
							}
						]
					}
				]
			},
			//表单数据
			form: {},
			data: [],
			imgType: 0,
			props1: {
				label: 'name',
				id: 'id',
				children: 'childrenNodes',
				disabled: 'classDisplay'
			},
			mineStatus: [],
			fourLevel: [],
			levels: [],
			listDicData: [],
			goodsClassLevel: []
		};
	},
	computed: {
		...mapGetters(['permission', 'userInfo', 'dictionariy']),
		permissionList() {
			return {};
		}
	},
	components: {
		selFile
	},
	mounted() {
		if (this.fourLevel.length == 0) {
			getOrganizationMapByLevel({ level: 4 }).then(res => {
				if (res.data.code == 200) {
					this.fourLevel = res.data.data;
				}
			});
			getMapAllGoodsClass({ classLevel: 2 }).then(res => {
				if (res.data.code == 200) {
					this.goodsClassLevel = res.data.data;
				}
			});
			getOrganizationMapByLevel({ level: '' }).then(res => {
				if (res.data.code == 200) {
					this.levels = res.data.data;
				}
			});
		}
		listDicData().then(res => {
			if (res.data.code == 200) {
				this.listDicData = res.data.data;
			}
		});
		this.getDetail();
	},
	methods: {
		changeTree(value){
			this.obj.operatingAreas = value.slice(0,value.length-1)
		},
		changeGClass(value){
			this.obj.goodsClassIdsName = value.slice(0,value.length-1)
		},
		storeLogoUrlSuccess(res) {
			if (res.code == 200) {
				this.obj.storeLogoUrl = res.data.src;
			} else {
				this.$message.error(res.message);
			}

			console.log(this.obj.storeLogoUrl);
		},
		showBigPic(img,name){
			this.innerVisible = true;
			this.workImg.imgUrl = img
			this.workImg.name = name
		},
		beforeStoreLogoUrlUpload(file) {
			console.log(file);
			const isJPG = file.type === 'image/jpeg' || 'image/png';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG) {
				this.$message.error('上传图片只能是 JPG/PNG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
			}
			this.headers['Authorization'] = getToken();
			return isJPG && isLt2M;
		},
		//营业执照号
		businessLicenseSuccess(res) {
			if (res.code == 200) {
				this.obj.businessLicense = res.data.src;
				// this.$refs.form.validate(res=>{
				// 	console.log(res)
				// })
			} else {
				this.$message.error(res.message);
			}
		},
		//营业许可证
		operateLicenseImgSuccess(res) {
			if (res.code == 200) {
				this.obj.operateLicenseImg = res.data.src;
			} else {
				this.$message.error(res.message);
			}
		},
		//身份证正面
		frontcardImgSuccess(res) {
			if (res.code == 200) {
				this.obj.frontcardImg = res.data.src;
				// this.$refs.form.validate(res=>{
				// 	console.log(res)
				// })
			} else {
				this.$message.error(res.message);
			}
		},
		//身份证反面
		backcardImgSuccess(res) {
			if (res.code == 200) {
				this.obj.backcardImg = res.data.src;
				// this.$refs.form.validate(res=>{
				// 	console.log(res)
				// })
			} else {
				this.$message.error(res.message);
			}
		},
		//其他1
		otherOneImgSuccess(res) {
			if (res.code == 200) {
				this.obj.otherOne = res.data.src;
			} else {
				this.$message.error(res.message);
			}
			console.log(this.obj);
		},
		//其他2
		otherTwoImgSuccess(res) {
			if (res.code == 200) {
				this.obj.otherTwo = res.data.src;
			} else {
				this.$message.error(res.message);
			}
			console.log(this.obj);
		},
		//其他3
		otherThreeImgSuccess(res) {
			if (res.code == 200) {
				this.obj.otherThree = res.data.src;
			} else {
				this.$message.error(res.message);
			}
			console.log(this.obj);
		},
		//其他4
		otherFourImgSuccess(res) {
			if (res.code == 200) {
				this.obj.otherFour = res.data.src;
			} else {
				this.$message.error(res.message);
			}
			console.log(this.obj);
		},
		//其他5
		otherFiveImgSuccess(res) {
			if (res.code == 200) {
				this.obj.otherFive = res.data.src;
			} else {
				this.$message.error(res.message);
			}
			console.log(this.obj);
		},
		removeDomain(index) {
			console.log('删除');
			console.log(index);
			// var index = this.acFullcuts.indexOf(item);
			if (this.acFullcuts.length > 1) {
				this.acFullcuts.splice(index, 1);
			} else {
				this.$message.error('至少保留一组！');
			}
		},
		addDomain() {
			console.log('新增');
			let len = this.acFullcuts.length + 1;
			if (len == 6) {
				this.$message.error('最多设置5组');
			} else {
				this.acFullcuts.push({
					label: '店铺首页banner' + len,
					image: '',
					acType: 1,
					goodsId: ''
				});
			}
		},
		//打开设置banner弹框
		setBanner() {
			this.imgVisible = true;
		},
		//提交设置的banner
		submitBanner() {
			this.imgVisible = false;
		},
		//取消设置banner
		cancelDia() {
			this.imgVisible = false;
		},
		uploadbtn(imgType) {
			this.imgType = imgType;
			//上传图片
			this.$refs.selFile.open();
		},
		selFileCallBack(data) {
			//选中图片传回的数据
			//最多上传5张照片
			console.log(this.imgType);
			console.log(data);
			if (data.length > 1) {
				this.$message({
					type: 'warning',
					message: '最多可上传1张图片'
				});
				if (this.imgType == 0) {
					this.obj.storeLogoUrl = [];
					this.obj.storeLogoUrl = data[0];
				} else if (this.imgType == 1) {
					this.obj.operateLicenseImg = [];
					this.obj.operateLicenseImg = data[0];
				} else if (this.imgType == 2) {
					this.obj.operateLicenseImg = [];
					this.obj.operateLicenseImg = data[0];
				} else if (this.imgType == 3) {
					this.obj.frontcardImg = [];
					this.obj.frontcardImg = data[0];
				} else if (this.imgType == 4) {
					this.obj.backcardImg = [];
					this.obj.backcardImg = data[0];
				} else if (this.imgType == 5) {
					this.obj.orthersImg = [];
					this.obj.orthersImg = data[0];
				} else if (this.imgType == 6) {
					this.obj.banner = [];
					this.obj.banner = data[0];
				}
			} else {
				if (this.imgType == 0) {
					this.obj.storeLogoUrl = data[0];
				} else if (this.imgType == 1) {
					this.obj.operateLicenseImg = data[0];
				} else if (this.imgType == 2) {
					this.obj.operateLicenseImg = data[0];
				} else if (this.imgType == 3) {
					this.obj.frontcardImg = data[0];
				} else if (this.imgType == 4) {
					this.obj.backcardImg = data[0];
				} else if (this.imgType == 5) {
					this.obj.orthersImg = data[0];
				} else if (this.imgType == 6) {
					this.obj.banner = data[0];
				}
			}
			console.log(this.obj.banner);
		},

		//店铺详情弹框提交
		submit(loading, done) {
			this.loading = true;
			// this.obj.orthersImgs.forEach((item,index)=>{
			// 	if(item){
			// 		if(index==0){
			// 			this.obj.otherOne=item.url
			// 		}else if(index==1){
			// 			this.obj.otherTwo=item.url
			// 		}else  if(index==2){
			// 			this.obj.otherThree=item.url
			// 		}else  if(index==3){
			// 			this.obj.otherFour=item.url
			// 		}else  if(index==4){
			// 			this.obj.otherFive=item.url
			// 		}
			// 	}
			// })
			delete this.obj.$bankId;
			delete this.obj.orthersImgs;
			delete this.obj.$companyCity;
			delete this.obj.$companyAreaId;
			delete this.obj.$companyProvince;
			delete this.obj.signingAreas;
			delete this.obj.operatingAreas;
			this.obj.signingArea.toString();
			this.obj.operatingArea.toString();
			this.obj.accountAddressId = this.obj.bankCity || '';
			// this.obj.postArea = this.obj.postAreaId;
			// this.obj.getArea = this.obj.getAreaId;
			console.log(this.obj);
			update(this.obj).then(
				res => {
					console.log(res);
					if (res.data.success) {
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
						this.getDetail();
					} else {
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					setTimeout(() => {
						this.loading = false;
						done();
					}, 1000);
				},
				error => {
					console.log(error);
				}
			);
		},
		//查看鼠标事件
		changeColor(val) {
			for (var item of this.paperWorkList) {
				if (item.id == val) {
					if (item.isOk) {
						item.isOk = false;
					} else {
						item.isOk = true;
					}
				}
			}
		},
		//查看证件图片
		// viewMyPaper(imgUrl, name) {
		// 	if (imgUrl == '') {
		// 		this.$message.error('暂无相关证件');
		// 	} else {
		// 		this.innerVisible = true;
		// 		this.workImg.imgUrl = imgUrl;
		// 		this.workImg.name = name;
		// 	}
		// },
		setDisabled(data) {
			data.forEach(item => {
				if (item.childrenNodes.length == 0) {
					item.disabled = true;
					// console.log('data:',data)
					return;
				} else {
					item.disabled = true;
					this.setDisabled(item.childrenNodes);
				}
			});
		},
		getDetail() {
			getStoreDetail().then(res => {
				if (res.data.code != 200) {
					this.$message.error(res.data.message);
				} else {
					this.obj = res.data.data;
					if (this.obj.goodsClassIds.length > 0) {
						var str = this.obj.goodsClassIds.split(',');
						let name = [];
						this.listDicData.forEach(item => {
							str.forEach(id => {
								if (id === item.value) {
									name.push(item.label);
								}
							});
						});
						this.obj.goodsClassIdsName = name.join(' | ');
					}
					//结算周期
					if(res.data.data.newSettlementCycle){
						this.optionEdit.group[1].column[8].tip = '新周期'+res.data.data.newSettlementCycle + '(本周期按照老周期结算)';
					}
					this.obj.validity = res.data.data.validity.substring(0, 11);
					this.obj.registerTime = res.data.data.registerTime.substring(0, 11);
					this.obj.orthersImgs = [];
					this.obj.businessTerm = res.data.data.businessTerm.split(',');
					this.obj.operatingArea = res.data.data.operatingArea.split(',');
					this.obj.signingArea = res.data.data.signingArea.split(',');
					this.obj.operatingAreas = [];
					this.obj.signingAreas = [];
					this.obj.goodsClassIds = res.data.data.goodsClassIds.split(',');
					this.obj.goodsClassIdsName = [];
					this.obj.goodsClassIds.forEach(item => {
						console.log(this.goodsClassLevel[item]);
						if (this.goodsClassLevel[item]) {
							this.obj.goodsClassIdsName.push(this.goodsClassLevel[item]);
						}
					});
					this.obj.operatingArea.forEach(item => {
						if (this.fourLevel[Number(item)]) {
							this.obj.operatingAreas.push(this.fourLevel[Number(item)]);
						}
					});
					this.obj.signingArea.forEach(item => {
						if (this.levels[Number(item)]) {
							this.obj.signingAreas.push(this.levels[Number(item)]);
						}
					});
					this.obj.signingAreas = this.obj.signingAreas.join(' | ');
					console.log(this.obj.orthersImgs);
					//获取办公地址
					getParentAndGrandInfoById(this.obj.companyAreaId).then(
						res => {
							var data = res.data.data;
							this.obj.companyProvince = data.gId;
							this.obj.companyCity = data.pId;
						},
						error => {
							console.log(error);
						}
					);
					setTimeout(()=>{
						this.$nextTick(() => {
							this.$refs['form'].clearValidate();
						});
					},1000)
					
				}
			});
		}
	}
};
</script>

<style scoped>
.checkPaper {
	color: #000000;
}

.checkPaper1 {
	color: red;
}
.avatar-uploader {
	width: 148px;
	height: 148px;
	margin-bottom: 20px;
	/* border: 1px dashed #d9d9d9; */
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	/* overflow: hidden; */
}
.avatar-uploader:hover {
	border-color: #f39800;
}
.avatar-uploader.pictureCard {
	border: 0;
	width: auto;
	min-width: 148px;
	height: 148px;
}
.avatar-uploader .avatar {
	width: 146px;
	height: 146px;
}

/* .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #F39800;
} */

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 146px;
	height: 146px;
	line-height: 146px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.upload {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.el-upload-list--picture-card .el-upload-list__item {
	margin-right: 40px !important;
}
.others {
	display: flex;
	.other-item {
		display: block;
	}
}
</style>
